<?xml version="1.0"?>
<!--
  ~ Copyright 2004-2012 ICEsoft Technologies Canada Corp.
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the
  ~ License. You may obtain a copy of the License at
  ~
  ~ http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an "AS
  ~ IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
  ~ express or implied. See the License for the specific language
  ~ governing permissions and limitations under the License.
  -->

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:f="http://java.sun.com/jsf/core" 
    xmlns:c="http://java.sun.com/jsp/jstl/core" 
    xmlns:ace="http://www.icefaces.org/icefaces/components" 
    xmlns:ice="http://www.icesoft.com/icefaces/component" 
    xmlns:ui="http://java.sun.com/jsf/facelets" 
    template="/resources/templates/content-template.xhtml">
    
    <ui:param name="title" value="#{msgs[popupCenter.title]}"/>
    <ui:param name="description" value="#{msgs[popupCenter.description]}"/>
    <ui:param name="resourceValue" value="#{popupCenter.exampleResource}"/>
    
    <ui:param name="wikiResources" value="#{compatComponentsResources.wikiResources}"/>
    <ui:param name="tldResources" value="#{compatComponentsResources.tldResources}"/>
    
    <ui:define name="example">
        <h:form>
            <h:panelGrid columns="2">
                <h:outputLabel for="centerIn" value="Auto Center?"/>
                <h:selectBooleanCheckbox id="centerIn" value="#{popupCenter.autoCentre}"/>
            </h:panelGrid>
        
            <h:commandButton value="#{popupCenter.opened ? 'Close Popup' : 'Open Popup'}"
                             actionListener="#{popupCenter.toggleOpened}"/>
            <ice:panelPopup visible="#{popupCenter.opened}"
                            rendered="#{popupCenter.opened}"
                            modal="true"
                            autoCentre="#{popupCenter.autoCentre}"
                            positionOnLoadOnly="false">
                <f:facet name="header">
                    <h:panelGroup>
                        <h:panelGroup style="float: left;">
                            #{msgs[popupCenter.title]}
                        </h:panelGroup>
                        <h:panelGroup style="float: right;">
                            <h:commandButton image="resources/css/images/popup-close.png"
                                             alt="Close" title="Close"
                                             style="height: 11px; width: 11px; border: 0;"
                                             actionListener="#{popupCenter.closeEvent}"/>
                        </h:panelGroup>
                    </h:panelGroup>
                </f:facet>
                <f:facet name="body">
                    The panelPopup is a container component that renders a window or panel that hovers on top of a web page.
                    The popupPanel contains two regions which are defined using facets. The facet names are: header and body.
                    The panelPopup component can be used to provide a general popup window behavior such as draggable or modal.
                </f:facet>
            </ice:panelPopup>
        </h:form>
    </ui:define>
</ui:composition>
